<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
<li>亲戚
    <ul>
        <li>姐姐</li><li>妹妹</li><li>鱼</li>
    </ul>
</li>

<li>同事
    <ul>
        <li>马云</li><li>马化腾</li><li>马保国</li>
    </ul>
</li>

<li>前女友们
    <ul>
        <li>朱莉莉</li><li>小星星</li><li>莉莉安</li>
    </ul>
</li>
</ul>

<script src="jquery.min.js"></script>
<script>
    //得到第二层的所有ul并让其隐藏
    $("li>ul").hide();
    //选择第一层的li并添加点击事件
    $("body>ul>li").click(function () {
        // $(this) 代表事件源，触发事件的元素
        //得到点击的li   里面的ul   children()获取子元素
        $(this).children().toggle();
    })
</script>
</body>
</html>